import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Button } from '@tarojs/components'
import { AtIcon, AtInput } from 'taro-ui'
import { Header } from '../../common/header';
import './confirm.scss'

import { connect } from '@tarojs/redux'
import { State, Props } from './confirm.interface'

@connect(({ confirm }) => ({
  ...confirm,
}))

export default class Confirm extends Component<State, Props> {

  constructor(props: Props) {
    super(props);
  }
  async componentDidMount() {
    const { dispatch } = this.props;
    await dispatch({
      type: 'confirm/getOrder',
      payload: { batch: '9155352426926088894' }
    })
  }

  onClickLeftIcon() {
    Taro.navigateBack();
  }

  handleSelectAddress() {
    Taro.navigateTo({
      url: '/pages/address/index?o_id=' + this.state.id + '&a_id=' + this.state.a_id
    });
  }

  handleSubmit() {

  }

  render() {
    const { order, address, pay } = this.props;
    console.log(order, address);
    return (
      <View className='oder-detail-box'>
        <Header
          leftIconType='chevron-left'
          onClickLeftIcon={this.onClickLeftIcon}
          title='确认订单'>
        </Header>

        {
          address
            ?
            <View className='address-content'>
              <View className='address-name'>
                <View className='address-name-text'>{address.consignee}</View>
                <View className='address-name-type'>默认</View>
              </View>
              <View className='address-content-info'>
                <View className='address-content-info-mobile'>
                  <Text>{address.contact}</Text>
                  <View className='address-edit' onClick={this.handleSelectAddress}>
                    <AtIcon prefixClass='icon' value='xiugai' size='12' color='#868686'></AtIcon>
                    <Text>修改</Text>
                  </View>
                </View>
                <View className='address-content-info-content'>
                  {address.province} {address.city} {address.district} {address.address}
                </View>
              </View>
            </View>
            :
            <View className='address-content'>
              <View className='address-content-empty' onClick={this.handleSelectAddress}></View>
            </View>
        }

        {
          order.map(function (oitem) {
            return <View>
              <View className='order-detail'>
                <View className='order-shop-name'>
                  <AtIcon prefixClass='icon' value='dianpu' size='12' color='#868686'></AtIcon>
                  <Text className='order-shop-name-text'>{oitem.name}</Text>
                </View>

                {
                  oitem.goods.map(function (item) {
                    return <View className='order-detail-goods'>
                      <Image className='order-detail-goods-image' src={item.thumbnail} mode='widthFix' />
                      <View className='order-detail-goods-info'>
                        <View className='order-detail-goods-title'>{item.name}</View>
                        <View className='order-detail-goods-unit'>规格: {item.sku}</View>
                        <View className='order-detail-goods-price'>
                          <View className='order-detail-goods-price-text'>￥{item.selling_price}</View>
                          <View>x{item.quantity}</View>
                        </View>
                      </View>
                    </View>
                  })
                }
              </View>

              <View className='order-money-detail'>
                <View className='order-money-detail-item'>
                  <View>商品总额</View>
                  <View className='order-money-detail-item-content'>
                    <View className='order-money-detail-text'>￥{oitem.goods_price}</View>
                  </View>
                </View>
                <View className='order-money-detail-item'>
                  <View>活动满减</View>
                  <View className='order-money-detail-item-content'>
                    <View className='order-money-detail-text'>￥0</View>
                  </View>
                </View>
                <View className='order-money-detail-item'>
                  <View>优惠券</View>
                  <View className='order-money-detail-item-content'>
                    <Text className='order-money-detail-text'>满100减20</Text>
                    <AtIcon value='chevron-right' size='16' color='#999999'></AtIcon>
                  </View>
                </View>
                <View className='order-money-detail-item'>
                  <View>运费</View>
                  <View className='order-money-detail-item-content'>
                    <View className='order-money-detail-text'>￥{order.freight ? order.freight : 0}</View>
                  </View>
                </View>
                <View className='order-money-detail-item'>
                  <View>实付金额</View>
                  <View className='order-money-detail-item-content'>
                    <View className='order-money-detail-text'>￥{oitem.pay_price}</View>
                  </View>
                </View>
              </View>
              <View className='order-remark'>
                <AtInput
                  className='order-remark-input'
                  name='remark'
                  title='留言'
                  type='text'
                  placeholder='给卖家留言'
                  value={this.state.remark}
                  border={false}
                  onChange={this.handleChange.bind(this)}
                />
              </View>
            </View>
          })
        }


        <View className='order-detail-bottom'>
          <View className='order-detail-realmoney'>
            <View>实付金额:</View>
            <View className='order-detail-realmoney-text'>￥{pay}</View>
          </View>
          <View className='order-detail-button'>
            <Button className='order-detail-button-item' onClick={this.handleSubmit}>提交订单</Button>
          </View>
        </View>

      </View>
    )
  }
}